<template>
  <view class="page">
    <!-- 标题 -->
    <view class="header">
      <text class="title">球局记录</text>
      <view class="frequency-box">
        <text class="frequency-text">累计有效比赛次数</text>
        <text class="count">{{ effectiveCount }}</text>
      </view>
    </view>

    <!-- 球局列表 -->
    <view v-for="(item, index) in listData" :key="index" class="card">
      <view class="card-content">
        <view class="left-info">
          <text class="game-title">{{ item.title }}</text>
          <text class="game-location">{{ item.location }}</text>
          <view class="game-time">{{ item.time }}</view>
        </view>
        <view class="right-status">
          <text class="status">{{ item.status }}</text>
        </view>
      </view>
    </view>

    <view class="loadmore-area">
      <u-loadmore :status="loadStatus" loadmoreText="正在加载..." loadendText="没有更多了..." font-size="14"></u-loadmore>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      effectiveCount: 0, // 模拟有效比赛次数
      loadStatus: 'more',
      pageNum: 1,
      pageSize: 3,
      totalPage: 3,
      listData: [],
    };
  },
  onLoad() {
    this.getListData();
  },
  onReachBottom() {
    this.loadMore();
  },
  methods: {
    getListData() {
      const data = this.mockData();
      this.listData = data.slice(0, this.pageSize);
      if (this.pageNum >= this.totalPage) {
        this.loadStatus = 'noMore';
      }
    },
    loadMore() {
      if (this.loadStatus === 'noMore' || this.loadStatus === 'loading') return;
      this.loadStatus = 'loading';
      setTimeout(() => {
        this.pageNum++;
        const data = this.mockData();
        const start = 0;
        const end = this.pageNum * this.pageSize;
        this.listData = data.slice(start, end);
        if (this.pageNum >= this.totalPage) {
          this.loadStatus = 'noMore';
        } else {
          this.loadStatus = 'more';
        }
      }, 1000);
    },
    mockData() {
      return [
        {
          title: '上海旗忠高尔夫球场',
          location: '上海',
          time: '2024-12-20 13:12',
          status: '已结束',
        },
        {
          title: '上海汤臣高尔夫俱乐部',
          location: '上海',
          time: '2024-12-20 11:12',
          status: '已结束',
        },
        {
          title: '上海旗忠高尔夫球场',
          location: '上海',
          time: '2024-12-19 19:12',
          status: '进行中',
        },
      ];
    },
  },
};
</script>

<style lang="scss" scoped>
.page {
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: 20rpx;
}

.header {
  background-color: #ffffff;
  padding: 20rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.frequency-box {
  display: flex;
  align-items: center;
  margin-top: 10rpx;
}

.frequency-text {
  font-size: 12px;
  color: #888;
}

.count {
  font-size: 14px;
  font-weight: bold;
  color: #74c050;
  margin-left: 10rpx;
}

.card {
  background-color: #ffffff;
  border-radius: 12rpx;
  margin: 10rpx 20rpx;
  padding: 20rpx;
  box-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.06);
}

.card-content {
  display: flex;
  justify-content: space-between;
}

.left-info {
  display: flex;
  flex-direction: column;
}

.game-title {
  font-size: 15px;
  font-weight: bold;
  color: #333;
  margin-bottom: 5rpx;
}

.game-location {
  font-size: 13px;
  color: #888;
  margin-bottom: 5rpx;
}

.game-time {
  font-size: 12px;
  color: #999;
}

.right-status {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}

.status {
  font-size: 13px;
  color: #666;
}

.loadmore-area {
  margin-top: 20rpx;
  display: flex;
  justify-content: center;
}
</style>